`<template>
  <div class="send-shop-wrapper px-3">
    <router-link :to="{name: 'shop_goods_list'}" style="position: absolute; left: 174px; top: 10px;">
      <el-button size="small">回到商品列表</el-button>
    </router-link>
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane label="基础设置">
        <!-- 基础设置的表单内容 -->
        <base-create-form></base-create-form>
      </el-tab-pane>
      <el-tab-pane label="商品规格">
        <el-form label-width="80px" size="medium" label-position="left">
          <el-form-item label="商品规格">
            <el-radio-group 
              size="small" 
              :value="skus_type" 
              @input="vModel('skus_type', $event)">
                <el-radio-button :label="0">单一规格</el-radio-button>
                <el-radio-button :label="1">多规格</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <!-- 单规格 -->
        <template v-if="!skus_type">
          <!-- 单规格表单 内容 -->
          <single-attrs-form></single-attrs-form>
        </template>
        <!-- 多规格 -->
        <template v-else>
          
          <!-- 规格卡片 -->
          <el-form label-width="80px" size="medium" label-position="left">
            <el-form-item label="添加规格">
              <sku-card 
                v-for="(item, index) in sku_card" 
                :key="index" 
                :item="item" 
                :index="index"></sku-card>
              <el-button @click="addSkuCard" style="margin-top: 10px;" type="success" size="small">添加规格</el-button>
            </el-form-item>         
          </el-form>

          <el-form label-width="80px" size="medium" label-position="left">
            <el-form-item label="批量设置">
              <el-button type="text">销售价</el-button>
              <el-button type="text">市场价</el-button>
              <el-button type="text">成本价</el-button>
              <el-button type="text">库存</el-button>
              <el-button type="text">体积</el-button>
              <el-button type="text">重量</el-button>
            </el-form-item>
            <el-form-item label="规格设置"></el-form-item>
          </el-form>
        </template>

      </el-tab-pane>

      <el-tab-pane label="商品属性">商品属性</el-tab-pane>
      <el-tab-pane label="媒体设置">媒体设置</el-tab-pane>
      <el-tab-pane label="商品详情">商品详情</el-tab-pane>
      <el-tab-pane label="折扣设置">折扣设置</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {options} from '@/common/json'
import {mapState, mapMutations} from 'vuex'
// 基本设置表单组件分离
import baseCreateForm from '@/components/shop/create/base-create.vue'
// 单一规格表单组件分离
import singleAttrsForm from '@/components/shop/create/single-attrs.vue'
// 多规格-卡片组件分离
import skuCard from '@/components/shop/create/sku/sku-card.vue'
const goods_create_state = ['skus_type', 'sku_card']
export default {
  components: {baseCreateForm, singleAttrsForm, skuCard},
  data() {
    return {
      tabIndex: 0,
      // --------
    }
  },
  computed: {
    ...mapState('goods_create', goods_create_state)
  },
  methods: {
    ...mapMutations('goods_create', ['vModelState', 'addSkuCard']),
    handleClick(tab, event) {
      console.log(tab.index)
    },
    vModel(key, val){
      this.vModelState({key, val})
    } 
  }
}
</script>

<style scoped lang="less">
  .send-shop-wrapper{
    margin: -20px;
    margin-top: -1rem;
    margin-bottom: 0;
    /deep/ .el-table th{
      padding: 8px 0;
    }
    /deep/ .el-table td{
      padding: 8px 0;
    }
    /deep/ .el-form-item{
      margin-bottom: 15px;
    }
    /deep/ .el-input{
      box-sizing: border-box;
    }
  }
</style>